SEOhub Introduction

This documentation will give you an understanding of how SEOhub template is structured and guide you in performing common functions.

NOTE: we will not respond to any support questions on Item comment section or through e-mail. If this document doesn’t answer your questions feel free to open up a private ticket in our support forum

If you want to customize, please contact us here: our support forum

Author: Potenza Global Solutions

Installation

Follow the steps below to get started with your Site Template:

  1. Open the ... /Template Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below:
    • css – Stylesheets Folder
    • fonts – Fonts Folder
    • images – Images Folder
    • js – Javacripts Folder
    • php – php Folder
    • revolution – Revolution slider all files
    • index-1.html – (and All HTML files that you want)

    The other files can be used according to your preferences.

  4. You’re now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Basic template Structure

The template has a responsive layout and is based on the Bootstrap V3+ Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.

HTML Structure

The general HTML structure is the same throughout the template. Here is the general HTML structure of the template:

<!DOCTYPE html>
<html lang="en">
 
  <head>
    [Page meta, page css, page title etc...]
  </head>
 
  <body>
   
  <!-- preloader -->
  <div id="loading"> [LOADER CONTENT] </div>
  <!--preloader -->
   
  <!--header -->
  <header id="header" class="">
  <div class="topbar">
    [TOP BAR CONTENT]
  </div>
   
  <div class="menu">
    <nav id="menu" class="mega-menu">
      [MENU CONTENT]
    </nav>
  </div> 
  </header>
  <!--header -->
   
  <!--Slider- -->
  <section class="rev_slider_wrapper">
    [SLIDER CONTENT]
  </section>
  <!--Slider -->
   
  <!--Section 1 -->
  <section>
    [SECTION 1 CONTENT]
  </section>
  <!--Section 1 -->
   
  <!--Section 2 -->
  <section>
    [SECTION 2 CONTENT]
  </section>
  <!--Section 2 -->
   
  <!--footer -->
  <footer class="footer">
    [FOOTER_CONTENT]
  </footer>
  <!--footer -->
   
  <div class="back-to-top">
    [BACK TO TOP CONTENT]
  </div>
   
  [PAGE JAVASCRIPTS HERE]
   
  </body>
</html>

CSS Structure

The general CSS structure is the same throughout the template. Here is the general CSS structure of the template:

<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico" />
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /
<!-- mega menu -->
<link rel="stylesheet" type="text/css" href="css/mega-menu/mega_menu.css" />
<!-- font awesome -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<!-- Themify icons -->
<link rel="stylesheet" type="text/css" href="css/themify-icons.css" />
<!-- owl-carousel -->
<link rel="stylesheet" type="text/css" href="css/owl-carousel/owl.carousel.css" />
<!-- revolution -->
<link rel="stylesheet" type="text/css" href="revolution/css/settings.css" />
<!-- main style -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Responsive -->
<link rel="stylesheet" type="text/css" href="css/responsive.css" />

Javascript Structure

The general Javascript structure is the same throughout the template. Here is the general Javascript structure of the template:

<!-- jquery  -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- bootstrap -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- mega-menu -->
<script type="text/javascript" src="js/mega-menu/mega_menu.js"></script>
<!-- owl-carousel -->
<script type="text/javascript" src="js/owl-carousel/owl.carousel.min.js"></script>
<!-- magnific-popup -->
<script type="text/javascript" src="js/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- appear -->
<script type="text/javascript" src="js/jquery.appear.js"></script>
<!-- counter -->
<script type="text/javascript" src="js/counter/jquery.countTo.js"></script>
<!-- custom -->
<script type="text/javascript" src="js/custom.js"></script>

Compiling Sass

Overview

Sass is perhaps the most popular of the CSS pre-processors; for years it’s helped us write clean, reusable and modular CSS. In this quick tutorial, I’ll cut straight to the stuff that matters and explain how to compile Sass into CSS using the command line.

To compile Sass via the command line, first we need to install node.js. Download it from the official website nodejs.org, open the package and follow the wizard.

NPM is the Node Package Manager for JavaScript. NPM makes it easy to install and uninstall third party packages. To initialize a Sass project with NPM, open your terminal and CD (change directory) to your project folder.

Once in the correct folder, run the command npm init. You will be prompted to answer several questions about the project, after which NPM will generate a package.json file in your folder.

Node-sass is an NPM package that compiles Sass to CSS (which it does very quickly too). To install node-sass run the following command in your terminal: npm install node-sass

Everything is ready to write a small script in order to compile Sass. Open the package.json file in a code editor. You will see something like this:

{
  "name": "sass-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

In the scripts section add an scss command, under the test command, as it’s shown below:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "scss": "node-sass --watch scss -o css"
}

Let’s go through this line word by word.

  1. node-sass: Refers to the node-sass package.
  2. --watch: An optional flag which means “watch all .scss files in the scss/ folder and recompile them every time there’s a change.”
  3. scss: The folder name where we put all our .scss files.
  4. -o css: The output folder for our compiled CSS.

To execute our one-line script, we need to run the following command in the terminal: npm run scss

Hurray! We are watching and compiling SASS.

Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

You can add a Favicon to your Website using the following code:

<link rel="shortcut icon" href="images/favicon.ico"/>

Page Loading Transitions

Page Loading Transitions are enabled by default. If you wish to disable the page loading transitions you can simply delete the below section.

<div id="loading">
  <div id="loading-center">
    <img src="images/loader.gif" alt="">
  </div>
</div>

You can update loading animation by replacing loader.gif with your loader.gif file in the images folder.

Logo Settings

The Logo Container can be found in the Header Container – #header. Replace "logo.png" with your own logo image URL.

<ul class="menu-logo">
  <li>
    <a href="index.html"><img id="logo_img" src="images/logo.png" alt="logo"> </a>
  </li>
</ul>

Note Default height of logo is 40px. you can set height according to your logo type and your requirement.

Color Schemes

You can change your Website’s Color Scheme in an instant. There are 2 super easy options to change your website color.

Option 1: You simply need to include an existing color scheme from (css/skins/skin-yourcolor.css) and include inside head See example below:

<link href="css/skins/skin-blue.css" rel="stylesheet" type="text/css" />

Option 2: Change the Color Code in the css/skins/skin-defult.css and include inside head See example below:

<link href="css/skins/skin-defult.css" rel="stylesheet" type="text/css" />

Changing Fonts style

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font code in top of the style.css file in the CSS folder:

@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900|Montserrat:400,700');

To include new font you can simply add another line like this:

@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900|Montserrat:400,700'); 
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,300italic,400italic,600italic,700italic,800italic);

Or add an | separator and paste Roboto:400,300,800,700,600 after default website fonts link.

In order to change the fonts, you will need to edit the above links with your custom font, if you plan to use a Google Font or remove it completely. If you plan to use a self hosted font, here is an Example of using Self Hosted Fonts

Mega menu

CSS3 Responsive Mega Menu is a premium plugin; very easy to implement and customize. Here is the super easy setting you can customize in custom.js:

jQuery('#menu').megaMenu({
  // DESKTOP MODE SETTINGS
  logo_align          : 'left',         // align the logo left or right. options (left) or (right)
  links_align         : 'left',         // align the links left or right. options (left) or (right)
  socialBar_align     : 'left',         // align the socialBar left or right. options (left) or (right)
  searchBar_align     : 'right',        // align the search bar left or right. options (left) or (right)
  trigger             : 'hover',        // show drop down using click or hover. options (hover) or (click)
  effect              : 'fade',         // drop down effects. options (fade), (scale), (expand-top), (expand-bottom), (expand-left), (expand-right)
  effect_speed        : 400,            // drop down show speed in milliseconds
  sibling             : true,           // hide the others showing drop downs if this option true. this option works on if the trigger option is "click". options (true) or (false)
  outside_click_close : true,           // hide the showing drop downs when user click outside the menu. this option works if the trigger option is "click". options (true) or (false)
  top_fixed           : false,          // fixed the menu top of the screen. options (true) or (false)
  sticky_header       : true,           // menu fixed on top when scroll down down. options (true) or (false)
  sticky_header_height: 250,            // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
  menu_position       : 'horizontal',   // change the menu position. options (horizontal), (vertical-left) or (vertical-right)
  full_width          : false,          // make menu full width. options (true) or (false)
  // MOBILE MODE SETTINGS
  mobile_settings     : {
    collapse            : true,         // collapse the menu on click. options (true) or (false)
    sibling             : true,         // hide the others showing drop downs when click on current drop down. options (true) or (false)
    scrollBar           : true,         // enable the scroll bar. options (true) or (false)
    scrollBar_height    : 400,          // scroll bar height in px value. this option works if the scrollBar option true.
    top_fixed           : false,        // fixed menu top of the screen. options (true) or (false)
    sticky_header       : false,        // menu fixed on top when scroll down down. options (true) or (false)
    sticky_header_height: 200           // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
  }
});

Note There are a lot features and styles (horizontal menu, vertical menu left, vertical menu right, 6 drop down animations, multilevel drop down and much more…). For mega menu please see mega menu documentation in documentation/mega menu for more.

Helper Classes

We have created some really useful helper classes for you. These classes help you to quick position elements without writing new CSS rules. These classes are generic helper classes predefined in the CSS pages, here is quick view what they can do

Page section padding

You can add this helper class to set section padding top 80px and padding bottom 80px.
Add page-section-ptb class in section tag. See example below:

<section class="... page-section-ptb">
   [YOUR CONTENT]
</section>

Note Use this helper class to maintain all page section spacing. You can also use page-section-pt for only padding top and page-section-pb for only padding bottom.

Section title

You can use this code for your page section title to maintain title style.

<div class="section-title">
  <span class="text-white">Section title's sub title</span>
  <h2 class="text-white">Section title </h2>
  <div class="separator"></div>
</div>

Text color

You can use color in the Text. simply add .text-blue ( or any color you want) class where you want to use. See example below:

<div class="text-blue">
  [YOUR TEXT CONTENT]
</div>

Note We include 4 color helper class in our template text-blue, text-white, text-black and text-gray. you can add unlimited color class according to your needs.

Background color

You can use color in the background. simply add .blue-bg (or any color you want) class where you want to use. See example below:

<div class="blue-bg">
  [YOUR CONTENT]
</div>

Note We include 4 background color helper class in our template blue-bg, white-bg, dark-gray-bg and gray-bg You can add unlimited background color class according to your needs

Background Images

Background

You can use an image in the background with parallax effect with simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

<div style="background-image:url(Path); ">    
  [YOUR CONTENT]
</div>

If your background is small and you want to use repeated background then use styling property background-repeat and set the value repeat or no-repeat. See the example below:

<div style="background-image:url(Path); background-repeat:no-repeat;">   
  [YOUR CONTENT]
</div>

If you want to use your background like cover or container so, you just add styling property background-size and set the value cover or cointainer. see the example below:

<div style="background-image:url(Path); background-size:cover;">    
  [YOUR CONTENT]
</div>

Background overlay

You can add this .bg-overlay-black-10 class to any element in your HTML code to apply overly color on any image or any section. See example below:

<div class="bg-overlay-black-10">
  [YOUR CONTENT]
</div>

Here are some predefined overlay classes you can use:

Class Description Class Description
.bg-overlay-black-10 which means apply black color overlay with 0.10 overlay .bg-overlay-black-20 which means apply black color overlay with 0.20 overlay
.bg-overlay-black-30 which means apply black color overlay with 0.30 overlay .bg-overlay-black-40 which means apply black color overlay with 0.40 overlay
.bg-overlay-black-50 which means apply black color overlay with 0.50 overlay .bg-overlay-black-60 which means apply black color overlay with 0.60 overlay
.bg-overlay-black-70 which means apply black color overlay with 0.70 overlay .bg-overlay-black-80 which means apply black color overlay with 0.80 overlay
.bg-overlay-black-90 which means apply black color overlay with 0.90 overlay
.bg-overlay-white-10 which means apply white color overlay with 0.10 overlay .bg-overlay-white-20 which means apply white color overlay with 0.20 overlay
.bg-overlay-white-30 which means apply white color overlay with 0.30 overlay .bg-overlay-white-40 which means apply white color overlay with 0.40 overlay
.bg-overlay-white-50 which means apply white color overlay with 0.50 overlay .bg-overlay-white-60 which means apply white color overlay with 0.60 overlay
.bg-overlay-white-70 which means apply white color overlay with 0.70 overlay .bg-overlay-white-80 which means apply white color overlay with 0.80 overlay
.bg-overlay-white-90 which means apply white color overlay with 0.90 overlay

Note You can create your own helper classes by creating the class in the stylesheet as per your requirement. This helper class only support RGBA color values.

Text align

You can add this helper class to any element in your HTML code to set text-align

Class Description
.text-left which means text-align: left;
.text-right which means text-align: right;
.text-center which means text-align: center;

Separator

You can add this helper class to any element in your HTML code to add Separator line. Simply add hr tag where you want to add the line. See example below:

...
  [SECTION 1 CONTENT]
...
</section> <!--Section 1 End-->
  <hr/>
<section> <!--Section 2 Start-->
...
  [SECTION 2 CONTENT]
...

Label

You can add this helper class to any element in your HTML code to make a label. Simply add label and label-danger (or any given below) class where you want to add a label. See example below:

<span class="label label-danger">Label name</span>

Here are some default labels you can use or you can make your own label as per your requirement.

Class Description Result
.label-default Default label Default
.label-primary Primary label Primary
.label-success Success label Success
.label-info Info label Info
.label-warning Warning label Warning
.label-danger Danger label Danger

Sliders

We include 3 different sliders for you to be used on any Page with 100s of Options. List of the Sliders included are mentioned as follows:

  • Revolution
  • Owl carousel

Revolution

Revolution Slider is a premium plugin, an awesome animated slider that creates eye-catching sliders.

Please find the full online Revolution Slider documentation.

Note

To load Revolution slider locally we included below js in all home pages. You can remove it when you upload the files to your web server. You don’t need these js files to load slider on live server. If you remove these js your slider will not work locally.

<!-- SLIDER REVOLUTION 5.0 EXTENSIONS  
(Load Extensions only on Local File Systems ! 
The following part can be removed on Server for On Demand Loading) -->
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.carousel.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="revolution/js/extensions/revolution.extension.video.min.js"></script>

Shortcodes

Shortcodes are reusable elements. They can be used anywhere on any page by simply copy/paste. Setting up shortcodes is very easy & self-explanatory. Here is the list of Shortcodes included with SEOhub:

  • Tabs
  • accordion
  • Sections
  • Counter
  • Contact form
  • Google map
  • Font icon
  • Bootstrap Grid

Tabs

Use the below code to display Tabs:.

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active">
    <a href="#tab-00" aria-controls="tab-00" role="tab" data-toggle="tab">
      [ Tab1 Title ]
    </a>
  </li>
  <li role="presentation">
    <a href="#tab-01" aria-controls="tab-01" role="tab" data-toggle="tab">
      [ Tab2 Title ]
    </a>
  </li>
</ul>
 
<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="tab-00">
    [ Tab1 Description ]
  </div>
  <div role="tabpanel" class="tab-pane fade" id="tab-01">
    [ Tab2 Description ]
  </div>
</div>

Note Make sure you use unique IDs for each Tab Items and Tab Container.

Accordion

Use the below code to display accordion:

<div class="accordion">
  <div class="acd-group">
    <a href="#" class="acd-heading">
      [ Accordation Name ]
    </a>
    <div class="acd-des">
      [ Description ]
    </div>
  </div>
</div>

There Are 3 types of accordion styles like With icon , Without icon , simple with text big and with icon bg style.

Sections

Setup your Sections outside the .container element.
<section class="your-section-title">
  <div class="container">
    <div class="row">
      [ YOUR SECTION HERE ]
    </div>
  </div>
</section>

Counter

You can add Counter on the scroll to any Page, use below code to display Counter:

<section class="counter">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="counter-block">
          <span class="ti-cloud-up"></span>
          <b class="timer mt-30 mb-30" data-to="3968" data-speed="10000">[ Your Counter Number ]</b> //data-to means that your counter moves upto your typing number
          <h6 class="text-white">[ YOUR CONTENT ]</h6>
        </div>
      </div>
    </div>
  </div>
</section>

Note You can set your counter data in data-to="3968" and set your data speed in data-speed="10000". The default data speed is 10000.

Contact form

Contact form as main part of Contact section, the only thing you need to do is to setup your email address.

To configure your email just go to PHP folder and open both php file contact-form.php and ajax-form.php, then replace demo@domain.com with your email address. That’s it!

See example below:

$to = 'demo@domain.com';            // Recipient's email address

Note Please find demo@domain.com and replace demo email with your email.

Google map

You can add Embedded Google Maps to any Page using the following setup:

  • 1: Go to Google map and Find your location.
  • 2: Go to Menu from left-bar and click on Share or embed map.
  • 3: Select Embed map & then copy iframe.
  • 4: Paste iframe into your HTML code.

Sample example of google map iframe:

<!--=============  contact-map  -->    
<section class="contact-map">    
  <div class="container-fluid">         
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8351288872545!2d144.9556518!3d-37.8173306!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4c2b349649%3A0xb6899234e561db11!2sEnvato!5e0!3m2!1sen!2sin!4v1443621171568" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen>
    </iframe>
  </div>  
</section>     
<!--=============  contact-map  -->

Note Remove width, height and style from the iframe. If you want to change it you can change it in CSS from style.css as per your requirement. For more information please visit Google map documentation.

Font icon

We have included Font awesome and themify icons in our template.

1: Font awesome:

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon’s name. Font Awesome is designed to be used with inline elements (we like the < i > tag for brevity, but using a < span > is more semantically correct). See example below:

<i class="fa fa-camera-retro"></i>

Note add font-awesome css in head tag after bootstrap.min.css. See example below::

<head> 
  [HEADER TAG] 
<!-- bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<!-- Font awesome --> 
<link href="css/font-awesome.css" rel="stylesheet" type="text/css" /> 
</head>

2: Themify icons:

You can place themify-icons just about anywhere using the icon’s class name. themify-icons is designed to be used with inline elements we like the < i > tag for brevity. See example below:

<i class="ti-arrow-up"></i>

Note Add themify-icons.css in head tag after bootstrap.min.css. See example below:

<head> 
  [HEADER TAG]
<!-- bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<!-- Themify icons --> 
<link href="css/themify-icons.css" rel="stylesheet" type="text/css" /> 
</head>

Note You must have to place any font-icon file into fonts folder. (e.g. – If you’ve font-awesome font so you need to put into fonts folder.

Bootstrap Grid

Grid systems are used for creating page layouts through a series of rows and columns that house your content.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-8
.col-md-6
.col-md-6
.col-md-12
<div class="row">   
  <div class="col-md-1">.col-md-1</div>   
  <div class="col-md-1">.col-md-1</div>   
  <div class="col-md-1">.col-md-1</div>  
  <div class="col-md-1">.col-md-1</div>   
  <div class="col-md-1">.col-md-1</div>   
  <div class="col-md-1">.col-md-1</div>   
  <div class="col-md-1">.col-md-1</div>   
  <div class="col-md-1">.col-md-1</div>   
  <div class="col-md-1">.col-md-1</div>   
  <div class="col-md-1">.col-md-1</div>   
  <div class="col-md-1">.col-md-1</div>   
  <div class="col-md-1">.col-md-1</div> 
</div>

<div class="row">   
  <div class="col-md-4">.col-md-4</div>  
  <div class="col-md-4">.col-md-4</div> 
  <div class="col-md-4">.col-md-4</div> 
</div> 

<div class="row">   
  <div class="col-md-4">.col-md-4</div>   
  <div class="col-md-8">.col-md-8</div> 
</div> 

<div class="row">  
  <div class="col-md-6">.col-md-6</div>  
  <div class="col-md-6">.col-md-6</div> 
</div>

<div class="row">  
  <div class="col-md-12">.col-md-12</div> 
</div>

Note For more information about bootstrap grid system please visit Bootstrap documentation.

Retina Display

The basic concept of a Retina image is that an image twice the size of a standard web image will be displayed on the screen. On a non-retina device an image will be 100px X 100px whereas a Retina device will display the same image but at 200px X 200px. Most of the devices use this branded concept for Retina devices like having approximately twice the pixel density of a non-retina device.

If you want to get perfect looking images on Retina screens, for example you build a website where you upload regular images into content, you must always upload 2 images in media.
Add new section which looks like below:

my_image.png - this is the name for standard image (e.g. 100px X 100px)
my_image@2x.png - this is the example name for retina image and file must be always 2x larger than regular image (e.g. 200px X 200px)

Note To make your website completely retina ready, you have to download ratina.js and include retina.js in your HTML head section. See example below:

<!-- retina --> 
<script type="text/javascript" src="js/retina.js"></script>

For more information about retina documentation and to download retina.js Click here.

Browser Support

SEOhub supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.

How to rate this item

If you like our theme and support, please do not forget to rate it with 5 stars in your ‘downloads’ section and write a review in comments as it will add more value to our services!

Just click http://themeforest.net/downloads and you will see this template there. Hit 5 Stars to make us happy and we will make more awesome templates for you 🙂

Change Log

Version 2.1

– 15 May 2018

  • Added: SASS Files

Version 2.0

– 07 April 2018

  • Added: Popper.js
  • Updated: jQuery Library to Latest Version
  • Updated: Bootstrap 3 to Bootstrap 4
  • Updated: jQuery Bootstrap Select Plugin updated to support Bootstrap 4

Version 1.1

– 15 Sep 2017

  • Fixed: Responsive container width spacing issue fixed in 320px screen
  • Updated: Service list 01 page HTML structure update
  • Updated: Home 2 and home 3 Revolution slider HTML code update
  • Updated: Minor code/formatting improvements and fixes.

Version 1.0

– Initial Release

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Images

Video

Scripts

CSS & Fonts

Note For questions on basic HTML, Javascript or CSS editing – please give your question a quick Google or visit W3Schools as template issues get top priority. You will need some knowledge of HTML/CSS to edit the template.

Suggest Edit